<template>
  <!-- 分发记录 -->
  <div class="content">
    <!-- 筛选 -->
    <div class="top-tool">
      <!-- 时间&状态 -->
      <div class="tool-left">
        <a-range-picker v-model:value="dateValue">
          <template #suffixIcon>
            <svg-icon icon-class="icon_select_date" class-name="icon-select-date"></svg-icon>
          </template>
        </a-range-picker>
      </div>
      <!-- 搜索&重置 -->
      <div class="tool-right">
        <a-input-group compact>
          <a-select v-model:value="searchTitle">
            <template #suffixIcon>
              <svg-icon icon-class="icon_select_down" class-name="icon-select-down"></svg-icon>
            </template>
            <a-select-option v-for="(item, i) in searchTitleArr" :key="i" :value="item.value">{{
              item.text
            }}</a-select-option>
          </a-select>
          <a-input
            v-model:value="keyword"
            style="width: 228px; height: 36px; border-radius: 0 4px 4px 0; margin-right: 8px"
            placeholder="请输入关键字查询"
          >
            <template #prefix>
              <svg-icon icon-class="icon_search" class-name="icon-search"></svg-icon>
            </template>
          </a-input>
        </a-input-group>
        <a-button type="primary">搜索</a-button>
        <a-button>重置</a-button>
      </div>
    </div>

    <!-- 表格  -->
    <div class="table-bg">
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        :pagination="false"
        table-layout="fixed"
        :scroll="{ y: tableHeight }"
      >
        <template #bodyCell="{ column, text, record }">
          <a-tooltip
            v-if="column.dataIndex !== 'operation'"
            placement="top"
            :title="
              column.dataIndex === 'title'
                ? text?.length > 30
                  ? text
                  : ''
                : column.dataIndex === 'number'
                ? text?.length > 13
                  ? text
                  : ''
                : column.dataIndex === 'draft'
                ? text?.length > 5
                  ? text
                  : ''
                : ''
            "
          >
            <div>
              <span v-if="column.dataIndex === 'processStatus'" class="state-bg">
                <svg-icon
                  :icon-class="stateIcons[parseInt(text ? text : '')]"
                  class-name="icon-state"
                />
                <span class="state-text">{{ stateTexts[parseInt(text ? text : '')] }}</span>
              </span>
              <span v-else>{{ text ? text : '--' }}</span>
            </div>
          </a-tooltip>
          <div
            v-else
            class="editable-row-operations"
            :title="
              column.dataIndex === 'title'
                ? text?.length > 30
                  ? text
                  : ''
                : column.dataIndex === 'number'
                ? text?.length > 13
                  ? text
                  : ''
                : column.dataIndex === 'draft'
                ? text?.length > 5
                  ? text
                  : ''
                : ''
            "
          >
            <span style="margin-right: 12px">
              <a @click="gotoDetail(record.key)">详情</a>
            </span>
            <span>
              <a @click="showModal(record.key)">分发明细</a>
            </span>
          </div>
        </template>
      </a-table>
      <!-- 分页器 -->
      <div class="pagination-bar">
        <div class="pagination-box">
          <a-pagination
            :current="currentPage"
            :page-size="pageSize"
            :total="total"
            :show-total="total => `共${total}条`"
            :show-size-changer="true"
            @change="onPageChange"
          />
          <div class="change-page-bg">
            <span>前往</span>
            <input
              class="change-page-input"
              type="text"
              @keyup="changePageKeyUp"
              @blur="changePageBlur"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 弹窗 -->
  <DistributeDetail
    v-if="showDistributeDetail"
    @distribute-detail-dismiss="distributeDetailCancel"
  />
</template>
<script setup>
import DistributeDetail from '../distributeDetail/index.vue';
import { ref, defineProps, onMounted, onUpdated } from 'vue';
const props = defineProps({
  categroyVal: {
    type: Number,
    default: 0
  }
});

// ------------- 筛选 -------------
const dateValue = ref();

const searchTitle = ref('标题');
const searchTitleArr = ref([
  { value: 'title', text: '标题' },
  { value: 'number', text: '文号' },
  { value: 'draft', text: '分发人' },
  { value: 'date', text: '发文日期' }
]);
const keyword = ref('');

// ------------- table -------------
const columns = ref([
  {
    title: '标题',
    dataIndex: 'title',
    width: '477px'
  },
  {
    title: '文号',
    dataIndex: 'number',
    width: '256px'
  },
  {
    title: '分发人',
    dataIndex: 'draft',
    width: '112px'
  },
  {
    title: '发文日期',
    dataIndex: 'date',
    width: '158px'
  },
  {
    title: '操作',
    dataIndex: 'operation'
  }
]);

const tableHeight = ref(
  window.innerHeight - 390 ||
    document.documentElement.clientHeight - 390 ||
    document.body.clientHeight - 390
);

const dataSource = ref([]);
for (let i = 0; i < 3; i++) {
  dataSource.value.push({
    key: '' + i.toString(),
    title: '关于2023年第二学期收费的通知',
    number: '校办公室〔2023〕1号',
    draft: '李慕雪',
    date: '2023-12-12'
  });
  dataSource.value.push({
    key: '' + i.toString(),
    title: '济南市教育局关于转发《济南市市场监督管》',
    number: '教育局〔2023〕12号',
    draft: '李慕雪慕雪',
    date: '2023-12-12'
  });
  dataSource.value.push({
    key: '' + i.toString(),
    title:
      '关于转发山东省教育厅台港澳办《关于推荐中小学及幼儿园教师赴香港、澳门开展交流协作的通知》的通知',
    number: '校办公室〔2023〕18号',
    draft: '李慕雪慕慕雪',
    date: '2023-12-12'
  });
  dataSource.value.push({
    key: '' + i.toString(),
    title: '关于2023年第二学期收费的通知',
    number: '校办校办公室〔2023〕16号',
    draft: '李慕雪',
    date: '2023-12-12'
  });
  dataSource.value.push({
    key: '' + i.toString(),
    title: '关于抽调2022年全市中小学生体质健康标准',
    number: '教育局育局育局育局育局育局',
    draft: '李慕雪',
    date: '2023-12-12'
  });
}
function gotoDetail(key) {
  console.log('gotoDetail:', key);
}
function showModal(key) {
  // console.log('showModal:', key);
  showDistributeDetail.value = true;
}
window.addEventListener('resize', () => {
  // console.log('resize event fired');
  tableHeight.value =
    window.innerHeight - 390 ||
    document.documentElement.clientHeight - 390 ||
    document.body.clientHeight - 390;
  // console.log('tableHeight:', tableHeight.value);
});
// ------------- 分页器 -------------
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
function changePageKeyUp(event) {
  if (event.key === 'Enter') {
    event.target.blur();
  }
}
function changePageBlur(event) {
  if (/[0-9]/.test(event.target.value)) {
    // 3we5 => 35
    event.target.value = event.target.value.replace(/[^0-9]/g, '');
    currentPage.value = parseInt(event.target.value);
    let maxPage = parseInt(total.value / pageSize.value + 1);
    maxPage = maxPage > 0 ? maxPage : 1;
    if (currentPage.value > maxPage) {
      currentPage.value = maxPage;
    }
    // getDataList();
    // 切换页数
  } else {
    event.target.value = '';
  }
}
function onPageChange(page, size) {
  // console.log(page, size);
  currentPage.value = page;
  pageSize.value = size;
  // getDataList();
}

const showDistributeDetail = ref(false);
function distributeDetailCancel() {
  showDistributeDetail.value = false;
}

onMounted(() => {
  // console.log('dataSource:', dataSource);
});
onUpdated(() => {
  // console.log('tableHeight:', tableHeight);
});
</script>
<style lang="less" scoped>
@import './index.less';
</style>
